<template>
    <div>
        <el-form :model="newSysmap" :rules="sysmapDataValidRules" ref="newSysmap">
            <el-form-item label="名称" label-width="50px" prop="name">
                <el-input v-model="newSysmap.name" auto-complete="off" size="small"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="success" @click="createSysmap('newSysmap')">{{$t('OK')}}</el-button>
            <el-button type="danger" @click="closeDialog">{{$t('Cancel')}}</el-button>
        </div>
    </div>
</template>

<<script>
import topoApi from 'api/topo'
export default {
    props: {
        busType: {
            style: String,
            default: function() {
                return '0'
            }
        }
    },
    data() {
        return {
            newSysmap: {
                name: ''
            },
            sysmapDataValidRules:{
                name:[{
                    required: true,
                    message: this.$t('The topology name cannot be empty'),
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        closeDialog() {
            this.$emit('transferCloseDialog', this.$t("Cancel to create"));
        },
        createSysmap(newSysmap) {
            const self = this;
            this.$refs[newSysmap].validate( (valid)=>{
                if (valid) {
                    const sysmapname = self.newSysmap.name;
                    let newTmpSysmap = {};
                    newTmpSysmap.name = sysmapname;
                    newTmpSysmap.busType = self.busType;
                    newTmpSysmap.width = '200';
                    newTmpSysmap.height = '200';
                    topoApi.createSysmap(newTmpSysmap).then(response => {
                        const reslt = response.data;
                        if (reslt.error != null) {
                            self.$message({type: 'error', message: self.$t('Failed to create') + ', ' + reslt.errorMsg});
                            self.$message({type: 'error', message: self.$t('already existed',{obj: sysmapname})});
                            return;
                        }
                        if (reslt != null) {
                            self.$emit('transferNewSysmap', reslt);
                        }
                    }).catch(err => {
                        self.$message({type: 'error', message: self.$t('Failed to create') + ', ' + self.$t('already existed',{obj: sysmapname})});
                        return;
                    });
                }
            });
        }
    },
}
</script>
